<template>
    <scroll class="suggest"
            :data="result"
            :pullup="pullup"
            :pulldown="pulldown"
            @scrollToEnd="searchMore"
            @pullingDown="searchFlish"
            ref="suggest"
    >
      <ul class="suggest-list">
        <li class="suggest-item" v-for="item in result" @click="selectItem(item)">
          <div class="icon">
            <i :class="getIconcls(item)"></i>
          </div>
          <div class="name">
            <p class="text" v-html="getDisplayName(item)"></p>
          </div>
        </li>
        <loading v-show="hasMore"></loading>
      </ul>
    </scroll>
</template>

<script>
  import {search} from "api/search";
  import {ERR_OK} from "api/config";
  import {filterSinger} from "common/js/song";
  import {mapMutations} from 'vuex';
  import Scroll from 'base/scroll/scroll';
  import Loading from 'base/loading/loading';
  import Singer from 'common/js/singer'
  const TYPE_SINGER = 'singer';
  const perpage = 30;
  export default {
      name: "suggest",
      props: {
        query: {
          type: String,
          default: ''
        },
        showSinger: {
          type: Boolean,
          default: true

        }
      },
    data() {
        return {
          page: 1,
          result: [],
          pullup: true,
          pulldown: true,
          hasMore: true
        }
    },
      methods: {
        search() {
          this.page = 1;
          this.hasMore = true;
          // 滚动到底部
          this.$refs.suggest.scrollTo(0,0);
          search(this.query,this.page,this.showSinger,perpage).then(res => {
            if (res.code === ERR_OK) {
              this.result = this._genResult(res.data);
              // 当搜索的页数*每页的条数大于总条数或者搜索列表wei[]时停止搜索
              this._checkMore(res.data)
            }
          })
        },
        searchMore() {
          if (!this.hasMore) {
            return
          }
          this.page++;
          console.log(this.page)
          search(this.query,this.page,this.showSinger,perpage).then(res => {
            if (res.code === ERR_OK) {
              this.result = this.result.concat(this._genResult(res.data));
              // 当搜索的页数*每页的条数大于总条数或者搜索列表wei[]时停止搜索
              this._checkMore(res.data)
            }
          })
        },
        searchFlish() {
          console.log('12323')
          this.search()
        },
        selectItem(item) {
          // 假如是歌手
          if (item.type === TYPE_SINGER) {
            const singer = new Singer({
              id: item.singermid,
              name: item.singername
            });
            this.$router.push({
              path: `/search/${singer.id}`
            });
            this.setSinger(singer)
          }
        },
        _checkMore(data) {
          const song = data.song;
          // 当搜索的页数*每页的条数大于总条数或者搜索列表wei[]时停止搜索
          if (!song.list.length || (song.surnum + song.songcurpage * perpage) >= song.totalnum) {
            this.hasMore = false;
            console.log('false')
          }
        },
        getDisplayName(item) {
          if (item.type === TYPE_SINGER) {
            return item.type.singername;
          } else {
            return `${item.songname} - ${filterSinger(item.singer)}`
          }
        },
        _genResult(data) {
          let ret = [];
          if (data.zhida && data.zhida.singerid) {
            // ...data.zhida 复制data.zhida信息
            ret.push({...data.zhida}, ...{type: TYPE_SINGER})
          }

          if (data.song) {
            ret = ret.concat(data.song.list)
          }
          return ret
        },
        getIconcls(item) {
          // 根据不同数据设定 getIconclass
          if (item.type === TYPE_SINGER) {
            return 'icon-mine'
          } else {
            return 'icon-music'
          }
        },
        ...mapMutations({
          setSinger: 'SET_SINGER'
        })
      },
      watch: {
        // 监听query的变化，变化时调取服务端
        query() {
        this.search()
        }
      },
      components: {
        Scroll,
        Loading
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
